<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 09:39:05
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-09-20 15:00:00
 * @FilePath: \website-reconstruction---vue\src\views\Contact.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import ContactTop from '@/components/sections/contact/ContactTop.vue'
import Message from '@/components/sections/contact/Message.vue'
import Header from '@/components/layout/Header.vue'
import Footer from '@/components/layout/Footer.vue'
import SubTitle from '@/components/commons/SubTitle.vue'
import { getContactInfoListByLang } from '@/api/xyybackend/getVoList.js'
import { computed, onMounted, ref } from 'vue'
import type { ContactInfo } from '@/types/selfdefine/Layout'
import { useLangStore } from '@/stores/langStore'
import { storeToRefs } from 'pinia'

const { currentLang } = storeToRefs(useLangStore())
/* console.log('currentLang:', currentLang)
console.log('value:', currentLang?.value) */
// 3. 【核心】computed 监听语言变化，自动返回翻译后的内容
const translatedContactItems = computed(() => {
  // console.log('【computed 触发】当前语言:', currentLang.value) // 🔥 加日志
  currentLang.value
  return contactItems.value.map((item) => {
    // 根据当前语言决定显示哪个字段
    const lang = currentLang.value
    return {
      id: item.id,
      icon: item.icon,
      title: lang === 'zh' ? item.title : item.titleTranslate || item.title,
      content:
        lang === 'zh' ? item.content : item.contentTranslate || item.content,
      tip: lang === 'zh' ? item.tip : item.tipTranslate || item.tip,
    }
  })
})

// 4. 页面加载时请求数据
onMounted(async () => {
  try {
    const res = await getContactInfoListByLang({ lang: 'en' })
    contactItems.value = res.rows // 假设数据在 res.rows
  } catch (error) {
    console.error('请求失败:', error)
  }
})
// Contact.vue
// ✅ 正确：直接定义 computed
const subtitleProps = computed(() => {
  return {
    title: currentLang.value === 'en' ? 'Contact Us' : '联系我们',
    homeLinkText: currentLang.value === 'en' ? 'Home' : '主页',
    currentSectionText: currentLang.value === 'en' ? 'Contact Us' : '联系我们',
  }
})
const contactItems = ref<ContactInfo[]>([])
</script>
<template>
  <Header />
  <SubTitle v-bind="subtitleProps" />
  <ContactTop :data="translatedContactItems" />
  <Message />
  <Footer />
</template>
